<template>
  <div class="hover_phone_box" @mouseenter="enter" @mouseleave="leave">
    <table-phone
      :phones="[
        {
          phoneNumber: items.phoneNumber,
          phoneOwnership: items.phoneOwnership,
        },
        items.phoneNumber2.length < 10
          ? {
              phoneNumber: '',
              phoneOwnership: '',
            }
          : {
              phoneNumber: items.phoneNumber2,
              phoneOwnership: items.phoneOwnership2,
            },
      ]"
    />
    <!-- @click="checkPhone(scope.row)" -->
    <div v-show="seen" class="hover_phone_con" @click="checkPhone(items)">
      查看电话
    </div>
  </div>
</template>

<script>
import TablePhone from '@/components/yiya/TablePhone'
import { getPhone } from '@/api/erp/common'

export default {
  components: {
    TablePhone,
  },
  props: {
    items: {
      type: Object,
      default: () => {},
    },
    type: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      seen: false,
    }
  },
  methods: {
    enter() {
      if (/^1(3|4|5|7|8|9)\d{9}$/.test(this.items.phoneNumber)) {
        this.seen = false
      } else {
        this.seen = true
      }
    },
    leave() {
      this.seen = false
    },
    async phone(params) {
      const { data } = await getPhone(params)
      return data
    },
    checkPhone(row) {
      this.seen = false
      this.$confirm('确认要查看"' + row.name + '"的联系方式吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let params = {
            id: row.id,
            type: this.type,
          }
          return this.phone(params)
        })
        .then((res) => {
          this.items.phoneNumber = res.phoneNumber1
          if (this.type == 1) {
            if (this.items.phoneNumber2 != undefined) {
              if (this.items.phoneNumber2.length > 10) {
                this.items.phoneNumber2 = res.phoneNumber2
              }
            }
          }
          this.msgSuccess('成功')
        })
        .catch(function () {
          return
        })
    },
  },
}
</script>

<style>
.hover_phone_box {
  padding: 4px 0;
  height: 100%;
  position: relative;
  cursor: pointer;
}
.hover_phone_con {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 99999;
  top: 0;
  left: 0;
  text-align: center;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  background: rgba(0, 0, 0, 0.5);
  font-weight: 700;
  color: #fff;
}
</style>
